<template>
  <div v-if="files.length <= 0">
    <el-empty
        v-if="!emptyMessage"
        :description="emptyDesc"
    />
    <el-result
        v-else
        icon="error"
        title="文件打不开"
        :sub-title="emptyMessage"
    />
  </div>
  <div
      v-else
      class="selection-container"
  >
    <div
        v-if="view === 'grid'"
        class="list"
    >
      <file-list-item
          v-for="file in files"
          :key="file.fileName"
          :file="file"
          :selected="selected.get(file.fileName) === true"
          class="item selection-item"
          @file-open="$emit('file-open', $event)"
          @update:selected="selected.set(file.fileName, $event)"
          :data-filename="file.fileName"
      />
    </div>
  </div>
</template>

<script>
import FileListItem from '@/components/file/FileListItem'
import SelectionArea from '@simonwep/selection-js'

export default {
    name: 'FileList',
    components: {
        FileListItem
    },
    props: {
        files: {
            type: Object,
            required: true
        },
        emptyMessage: {
            type: String,
            default: ''
        },
        emptyDesc: {
            type: String,
            default: '文件夹为空'
        },
        selected: {
            type: Map,
            default: new Map()
        }
    },
    data() {
        return {
            view: 'grid',
            selectionMode: false,
            selection: {}
        }
    },
    computed: {
        isMobile() {
            return this.$store.isMobile
        }
    },
    mounted() {
        if(!this.isMobile) {
            const selection = new SelectionArea({
                document: window.document,
                class: 'selection-area',
                container: '.selection-container',
                selectables: ['.selection-item'],
                startareas: ['.selection-container'],
                boundaries: ['.selection-container'],
                startThreshold: 10,
                allowTouch: true,
                intersect: 'touch',
                overlap: 'invert',
                singleTap: {
                    allow: false,
                    intersect: 'native'
                },
                scrolling: {
                    speedDivider: 10,
                    manualSpeed: 750
                }
            })
            selection
                .on('start', (evt) => {
                    if(!evt.event.ctrlKey && !evt.event.metaKey) {
                        this.selected.clear()
                    } else {
                        evt.store.stored = [...window.document.getElementsByClassName('selection-item')]
                            .filter((el) => {
                                const attr = el.getAttribute('data-filename')
                                if(attr == null) 
                                    return false
                                return this.selected.set(attr, true)
                            })
                    }
                })
                .on('move', (evt) => {
                    const added = evt.store.changed.added
                    const removed = evt.store.changed.removed
                    added.forEach((it) => {
                        const attr = it.getAttribute('data-filename')
                        this.selected.set(attr, true)
                    })
                    removed.forEach((it) => {
                        const attr = it.getAttribute('data-filename')
                        this.selected.set(attr, false)
                    })
                })
                .on('stop', () => {
                    selection.clearSelection()
                })
            this.selection = selection
        }
    }
}
</script>

<style lang="less">
.selection-area {
  background: rgba(46, 115, 252, 0.11);
  border: 2px solid rgba(98, 155, 255, 0.81);
  border-radius: 0.1em;
}
</style>

<style scoped lang="less">
.selection-container {
  min-height: 100%;
  user-select: none;
}
.list {
  display: grid;
  flex-wrap: wrap;
  justify-content: space-between;
  grid-template-columns: repeat(auto-fill, 180px);
  grid-gap: 8px;

  .item {
    padding: 16px 0;
  }
}
</style>